<template>
  <div class="nav-box">
    <div class="logo">
      最好用的AI工具
    </div>
    <div class="nav_list_box">
      <div class="nav_item" 
        v-for="menu in menuStore.menuList"
        :key="menu.id"
        :class="{ active: menuStore.activeMenuId === menu.id }"
        @click="menuStore.handleMenuClick(menu.id)"
      >
        {{ menu.label }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useMenuStore } from '../stores/menusStore';

const menuStore = useMenuStore();
</script>
<style scoped>
.nav-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 5px 0 10px;
  box-sizing: border-box;
}
.nav-box .logo {
  height: 50px;
  flex: 0 0 50px;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
}
.nav-box .nav_list_box {
  flex: 0 0 calc(100% - 50px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid rgba(255,255,255,.2);
  padding-right: 10px;
}
.nav_item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  background-color: rgba(255,255,255,.05);
  border-radius: 100px;
  font-size: 14px;
  cursor: pointer;
}
.nav_item.active {
  background-color: rgba(255,255,255,.2);
}
</style>